<script>
export default {
  name: 'Login',

  data() {
    return {
      account: '',
      password: '',
      userType: '运动员',
    };
  },

  mounted() {
    // 初始化身份
    console.log(this.$store.state);
  },

  methods: {
    login() {
      if (this.validateInputs()) {
        const userData = {
          account: this.account,
          password: this.password,
          userType: this.userType,
        };

        // 转换为 JSON 字符串
        const jsonData = JSON.stringify(userData);

        this.$store.dispatch('loginUser', jsonData);
      }
    },

    validateInputs() {
      if (!this.account || !this.password) {
        // 提示用户输入不完整
        alert('请填写用户名和密码');
        return false;
      }
      return true;
    },
  },
};
</script>

<template>
  <main>
    <div class="wrapper">
      <div class="logo">
        <img src="@/assets/校徽.png" alt="logo"/>
      </div>
      <div class="title">
        运动会信息管理系统
      </div>
      <div class="input-container">
        <form class="input-form">
          <div class="input-icon-group">
            <img class="input-icon-group-icon" src="../../assets/user-circle.svg" alt="account-icon"/>
            <input v-model="account" type="text" placeholder="请输入账号"/>
          </div>
          <div class="input-icon-group">
            <img class="input-icon-group-icon" src="../../assets/lock-fill.svg" alt="password-icon"/>
            <input v-model="password" type="password" placeholder="请输入密码"/>
          </div>
          <div class="input-icon-group">
            <img class="input-icon-group-icon" src="../../assets/id-card.svg" alt="password-icon"/>
            <select v-model="userType">
              <option value="运动员">运动员</option>
              <option value="检录员">检录员</option>
              <option value="项目裁判员">项目裁判员</option>
              <option value="项目裁判长">项目裁判长</option>
              <option value="总裁判长">总裁判长</option>
              <option value="管理员">管理员</option>
            </select>
          </div>
        </form>
      </div>
      <div class="button-group">
        <button class="button-register">赛事报名</button>
        <button class="button-login" @click="login">登录</button>
      </div>
      <div class="forgot-password">
        <a href="#" class="forgot-password-link">忘记密码?</a>
      </div>
    </div>
  </main>
</template>

<style scoped>
  main {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
  }

  .wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 27vw;
    height: 62vh;
    background-color: rgb(255, 254, 254);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }

  .logo {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
  }

  /*强制img扩展到.logo的完整宽高*/
  .logo img {
    width: 100%;
    height: 100%;
  }

  .title {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgb(1, 111, 160);
    margin-top: 2%;
    margin-bottom: 1%;
  }

  .input-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
  }

  .input-form {
    width: 70%;
  }

  .input-icon-group {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 3%;
  }

  /*由于输入框是块级元素，默认情况下会占据父元素的宽度，所以需要设置宽度，否则会导致输入框的宽度过大，不美观*/
  .input-icon-group input {
    width: 88%; /* 设置输入框的宽度 */
    margin: 9px 6px 9px 10px; /* 使用 margin: auto; 使其在主轴上居中 */
    padding: 6px 10px 8px 10px; /* 设置内边距 */
    border: none; /* 去除边框 */
    border-bottom: 1px solid #ccc; /* 添加下方横线 */
    border-radius: 0; /* 可以设置为0，确保底部横线直接连接到输入框 */
    outline: none; /* 去除聚焦时的外边框 */
  }

  .input-icon-group select {
    width: 88%; /* 设置输入框的宽度 */
    margin: 9px 6px 9px 10px; /* 使用 margin: auto; 使其在主轴上居中 */
    padding: 6px 10px 8px 10px; /* 设置内边距 */
    border: none; /* 去除边框 */
    border-bottom: 1px solid #ccc; /* 添加下方横线 */
    border-radius: 0; /* 可以设置为0，确保底部横线直接连接到输入框 */
    outline: none; /* 去除聚焦时的外边框 */
  }

  .input-icon-group-icon {
    padding: 5px 0;
    width: 12%; /* 图片宽度相对于父容器百分比 */
    height: auto; /* 让高度自动调整以保持宽高比 */
    object-fit: contain; /* 图片不变形 */
  }

  .button-group {
    display: flex;
    flex-direction: row;
    margin-top: 3%;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .button-register {
    width: 35%;
    height: 100%;
    padding: 2% 0;
    border: none;
    border-radius: 5px;
    background-color: rgb(217, 0, 27);
    color: white;
    font-size: 0.78rem;
    font-weight: 500;
    margin-right: 4%;
    cursor: pointer;
  }

  .button-login {
    width: 30%;
    height: 100%;
    padding: 2% 0;
    border: none;
    border-radius: 5px;
    background-color: rgb(30, 152, 215);
    color: white;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
  }

  .forgot-password {
    width: 100%;
    margin-top: 2%;
    text-align: center;
  }

  .forgot-password-link {
    position: absolute;
    right: 4%;
    bottom: 3%;
    color: rgb(1, 111, 160);
    text-decoration: underline;
    text-underline-offset: 0.2rem; /* 调整这个值以控制下划线和文字之间的距离 */
    font-size: 0.7rem;
    cursor: pointer;
  }

</style>